//设备报修页面
import React, { Component } from "react";
import { SearchBar, Button } from "zarm";
import { nanoid } from "nanoid"; // ID生成器
import moment from "moment";
import "./equipmentRepairService.scss";

const list = [
  { img: require("../../img/电话报修.png").default, name: "电话报修" },
  { img: require("../../img/语音报修.png").default, name: "语音报修" },
  { img: require("../../img/填单报修.png").default, name: "填单报修" },
];

const arr = [
  {
    img: require("../../img/报修图1.png").default,
    type: "电话报修",
    content: "前几天下雨，办公室漏水，急需检修",
    time: new Date().getTime(),
  },
  {
    img: require("../../img/报修图2.png").default,
    type: "语音报修",
    content: "多媒体教室设备开机状态下无法正常投影",
    time: new Date().getTime() + 456465,
  },
  {
    img: require("../../img/报修图3.png").default,
    type: "填单报修",
    content: "一号办公楼指纹锁无法识别，备用钥匙也没有",
    time: new Date().getTime() - 447895,
  },
];
class List extends Component {
  render() {
    // return <div className="Waiting-list">
    //   <div className="list-left">
    //     <img src={require('../../img/报修图1.png').default} alt="" />
    //   </div>
    //   <div className="list-right">
    //     <div className="up"><span>电话报修</span>前几天下雨，办公室漏水，急需检修</div>
    //     <div className="down">
    //       <div>{moment(new Date().getTime()).format("YYYY.MM.DD ss:hh")}</div>
    //       <Button  shape="round">接单</Button>
    //     </div>
    //   </div>
    // </div>;
    return (
      <div className="Waiting-list">
        <div className="list-left">
          <img src={this.props.img} alt="" />
        </div>
        <div className="list-right">
          <div className="up">
            <span>{this.props.type}</span>
            {this.props.content}
          </div>
          <div className="down">
            <div>{moment(this.props.time).format("YYYY.MM.DD ss:hh")}</div>
            <Button shape="round">接单</Button>
          </div>
        </div>
      </div>
    );
  }
}
export default class EquipmentRepairService extends Component {
  state = {
    value: "",
    active: "1",
  };
  componentDidMount() {
    window.document.title = "设备报修";
  }
  onSelect = (active) => {
    this.setState({ active });
  };
  Go = (type) => {
    if (type === "电话报修") {
      <a href="tel:400-0000-677">400-0000-688</a>;
    }
    if (type === "填单报修") {
      this.props.history.push("/tdbx");
    }
  };
  render() {
    const { value, active } = this.state;
    return (
      <div className="equipment">
        <div className="search">
          <SearchBar
            shape="round"
            value={value}
            placeholder="请输入标题搜索"
            onSubmit={(value) => {
              this.setState({ value: "" }, () => {
                console.log(`搜索内容为${value}`);
              });
            }}
            onChange={(value) => this.setState({ value })}
          />
        </div>
        <div className="navbar">
          {list.map((item) => {
            if (item.name === "电话报修") {
              return (
                <a href="tel:400-0000-677"  key={nanoid()}>
                  <img src={item.img} alt="" />
                  <div>{item.name}</div>
                </a>
              );
            } else {
              return (
                <div
                  key={nanoid()}
                  className="item"
                  onClick={() => this.Go(item.name)}
                >
                  <img src={item.img} alt="" />
                  <div>{item.name}</div>
                </div>
              );
            }
          })}

          {/*  {list.map((item) => (
            <div key={nanoid()} className="item" onClick={()=>this.Go(item.name)}>
              <img src={item.img} alt="" />
              <div>{item.name}</div>
            </div>
          ))} */}
        </div>
        <div className="content">
          <div className="navheader">
            <div
              className={active === "1" ? "active" : ""}
              onClick={() => this.onSelect("1")}
            >
              待接单
              <span className="line" />
            </div>
            <div
              className={active === "2" ? "active" : ""}
              onClick={() => this.onSelect("2")}
            >
              已接单
              <span className="line" />
            </div>
            <div
              className={active === "3" ? "active" : ""}
              onClick={() => this.onSelect("3")}
            >
              已完工
              <span className="line" />
            </div>
          </div>
          <div
            style={{ display: active === "1" ? "block" : "none" }}
            className="list"
          >
            {arr.map((elem) => (
              <List key={nanoid()} {...elem} />
            ))}
          </div>
          <div
            style={{ display: active === "2" ? "block" : "none" }}
            className="list"
          >
            已接单
          </div>
          <div
            style={{ display: active === "3" ? "block" : "none" }}
            className="list"
          >
            已完工
          </div>
        </div>
      </div>
    );
  }
}
